<template>
  <div class="index-conntainer">
     <div class="content">
       
       <div class="headbtn_box">
           <div class="addbutton"> 
               <el-button type="danger"  size="small"  @click="editHandler"  v-if="!isEditable" > 编辑</el-button>
               
               <el-button type="success"  size="small" @click="cancelHandler"  v-if="isEditable" > 取消</el-button>
               <el-button type="primary"  size="small" @click="saveHandler"  v-if="isEditable" > 保存</el-button>
           </div>
       </div>
       
        <div class="container">
               
                 
            <!-- 修改登录密码 --> 
            <div > 
             <el-form ref="adaPwdRef" :model="ada"  :label-position="labelPosition"  label-width="100px" label-position="left" size="small"> 
                 <el-card class="box-card" shadow="never">
                   <el-form-item label="密码修改" class="box_tit">
                     <el-tooltip effect="dark" content="此账号为门店管理员登录时的账号密码，请妥善保管。" placement="bottom">                       
                        <el-icon>
                            <QuestionFilled/>
                         </el-icon>
                     </el-tooltip>
                   </el-form-item>
                   
                   <el-row>                   
                     <el-col :span="8"  :offset="8">  
                       <el-form-item label="新密码:"  prop="newPwd" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                           <el-input type="password" v-model="ada.newPwd" placeholder="请输入密码" />
                       </el-form-item>
                       <el-form-item label="确认密码:"  prop="rePwd"  :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                           <el-input  type="password" v-model="ada.rePwd" placeholder="请输入再次输入密码" />
                       </el-form-item>
                       
                       <el-form-item    >
                           <el-button type="primary" @click="handlerUpdatePassword" >修改登录密码</el-button>
                       </el-form-item>
                       
                     </el-col>
                     
                   </el-row> 
                 </el-card>
               </el-form>
            </div>
            
          <el-form ref="formRef" :model="form"  :label-position="labelPosition"  label-width="100px" label-position="left" size="small"> 
           <div class="mt15" >  
             <el-card class="box-card" shadow="never">
               <el-form-item label="商家信息" class="box_tit">
               </el-form-item>
               
                <!-- 查看详情信息层 -->
                <div class="views" v-if="!isEditable">
                  <el-row :gutter="15">
                    <el-col :span="8">
                      <el-form-item label="登录账户:">
                        {{ viewForm.loginName }}
                      </el-form-item>
                    </el-col>
  
                    <el-col :span="8">
                      <el-form-item label="商家名称:">
                        {{ viewForm.name }}
                      </el-form-item>
                    </el-col>
  
                    <el-col :span="8">
                      <el-form-item label="联系电话:">
                        {{ viewForm.phone }}
                      </el-form-item>
                    </el-col>
                  </el-row>
  
                  <el-row :gutter="15">
                    <el-col :span="8">
                      <el-form-item label="商家图片:">
                        <img width="200" :src="viewForm.picture" />
                      </el-form-item>
                    </el-col>
  
                    <el-col :span="16">
                      <el-form-item label="联系地址:">
                        {{ viewForm.address }}
                      </el-form-item>
                    </el-col>
                  </el-row>
  
                  <el-row :gutter="15">
                    <el-col :span="24">
                      <el-form-item label="地图位置:">
                        <baiduDisplay
                          v-if="viewForm && viewForm.latitude"
                          :itemData="viewForm"
                          style="width: 100%; height: 450px"
                        ></baiduDisplay>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
                 
                
                  <!-- 编辑信息层 -->
                 <div class="edits" v-if="isEditable">
                   
                   <el-form-item label="商家名称:" >
                       {{ form.name }}
                   </el-form-item>
                   
                   <el-form-item label="联系电话" prop="phone" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                     <el-input v-model="form.phone" placeholder="联系电话" />
                   </el-form-item>
                   
                   <el-form-item label="地图位置" prop="longitude" style="text-align:left;" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                     <span>经度:{{form.longitude}} 纬度:{{form.latitude}}</span>
                     <el-button type="primary" @click="mapShow=true">选择位置</el-button>  
                   
                     <div style="display:none;">
                       <el-input v-model="form.longitude" />
                     </div>
                   </el-form-item>
                   
                   <el-form-item label="商家地址" prop="address" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                     <el-input v-model="form.address" placeholder="商家地址" />
                   </el-form-item>
                   
                   <el-form-item label="商家图片" prop="picture" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                     
                     <el-upload
                         class="avatar-uploader"
                         :action="imageUploadUrl"
                          :headers="header"
                         :show-file-list="false"
                         :on-success="handleAvatarSuccess"
                         :before-upload="beforeAvatarUpload"
                       >
                         <img v-if="form.picture" :src="form.picture" class="avatar" width="350" />
                         <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                       </el-upload>
                   
                     <div style="display:none;">
                       <el-input v-model="form.picture" />
                     </div>
                   </el-form-item>
                   
                   
                 </div>
                
             </el-card> 
             
           </div> 
           </el-form>
          
        </div>
        
        
        
        <!--选择地图 -->
         <el-dialog title="选择位置" v-model="mapShow" width="800px"   >
            <div class="mapdialog"> 
               <baiduSearch :itemData="form" @myclick="localCallback"  style="height: 400px;"></baiduSearch>
            </div>
         </el-dialog>
       
      </div>
  </div>
</template>

<script setup>
  import { ref} from 'vue'
  import { QuestionFilled } from '@element-plus/icons-vue' 
  import { ElMessage } from 'element-plus'
  import { useRouter } from 'vue-router';
  import store from '@/store/index.js'
  //定义国际化的语言的文件
  import { useI18n } from 'vue-i18n';
  const { t } = useI18n();
  
  import {copyObject} from '@/utils/index.js'
  
  import {detailApi, updateApi, updatePwdApi} from '@/api/merchandiser.js'
  import baiduDisplay from '@/components/BaiduAddress/display.vue'
  import baiduSearch from '@/components/BaiduAddress/index.vue'
  
  import { setting } from '@/config/setting';
  const {  recordRoute } = setting;
  
  const { proxy } = getCurrentInstance(); 
  
  const router = useRouter();
    
  //图片上传地址
  const imageUploadUrl =ref(process.env.VUE_APP_BASE_API+'/api/upload/image')
  
  const labelPosition = ref('right')
  
  // 百度地图对话框显示
  const mapShow = ref(false)
  
  //是否可编辑
  const isEditable = ref(false)
  
  //编辑
  const form=ref({
    picture: undefined
  })
  
  //显示表单数据
  const viewForm=ref({})
  
  
  //密码对象
  const ada=ref({})
  
  const header=ref({
      'Authorization': store.getters['user/accessToken']
   })
  
  
  
  
  //百度地图位置选择
  function localCallback(value){
    mapShow.value=false 
    form.value.latitude= value.latitude
    form.value.longitude=value.longitude
    form.value.address=value.address  
  }
  
  //点击编译的时候
  function editHandler(){
     isEditable.value=true
  }
  
  //点击取消的时候
  function cancelHandler(){
    copyObject(viewForm.value, form.value)
    isEditable.value=false
  }
  
  //点击保存的时候
  function saveHandler(){
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {           
          ElMessageBox.confirm(
             '确定要提交数据吗?',t('btn.confirm'),
             {
               confirmButtonText: t('btn.confirm'),
               cancelButtonText: t('btn.cancel'),
               type: 'danger',
             }
           )
           .then(() => {
              //确认
              updateApi(form.value).then(resp=> {
                ElMessage({
                    message: '操作成功',
                    type: 'success',
                  })
                 //最新数据，copy给viewForm
                  copyObject(form.value, viewForm.value)
                  isEditable.value= false 
              }).catch(e=> {
                
              }) 
           })
           .catch(() => { 
           })            
       }
    }) 
  }
  
  
  //文件上传成功
  function handleAvatarSuccess(res, file) {
    if(res.code===200){
       form.value.picture= res.data.image_url
    }else{
       ElMessage.error( res.msg);
    } 
   } 
  
  //获取商家信息
  function detail(){
      detailApi().then((resp) => {
        //编辑表单 
        copyObject(resp.data, form.value,'createTime','status')
         
        //显示表单 
        copyObject(form.value, viewForm.value)        
        
        ada.value.id=resp.data.id;
      });
  } 
  
  // 修改密码
  function handlerUpdatePassword(){
    proxy.$refs["adaPwdRef"].validate(valid => {
        if (valid) {           
          ElMessageBox.confirm(
             '确定要修改密码吗?',t('btn.confirm'),
             {
               confirmButtonText: t('btn.confirm'),
               cancelButtonText: t('btn.cancel'),
               type: 'danger',
             }
           )
           .then(() => {
              //确认
              updatePwdApi(ada.value).then(resp=> {
                
                ElMessageBox.alert('修改密码成功，请重新登录', '确定', {                   
                    confirmButtonText: 'OK',
                    callback: async () => {
                      
                      await store.dispatch('user/logout');
                      if (recordRoute) {
                        const { fullPath } = router.currentRoute._value;
                        location.replace('/login');
                      } else {
                        router.push('/login');
                      }
                      
                    }
                });
                
                 
                 
                
              }).catch(e=> {
                
              }) 
           })
           .catch(() => { 
           })            
       }
    }) 
  }
  
  //初始化加载数据
  detail();
  
</script>

<style  lang="scss">
  
  .headbtn_box {
      position: relative;
      background-color: white;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0 16px;
      z-index: 1;
      min-width: 950px;
      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05);
  
      .addbutton {
          right: 10px;  
          button {
              margin: 0 8px;
          }
      }
  }
  
  .container{
     height: calc(100% - 64px);
     
     .box_tit {
         font-size: 16px;
         font-weight: bold;
         color: #000000;
     
         .el-form-item__label {
             font-size: 16px !important;
             color: #000000 !important;
         }
     }
     
     .mt15{
       margin-top: 15px;
     }
     
     .el-form-item__label, el-form-item__content {
         font-size: 14px;        
     }
     
  }
  
</style>
